<template>
	<view>
		<view class="del_title">
			<view class="del_title_title">{{data.title}}</view>
			<view class="del_title_tab">
				<view>阅读量：{{data.read || 0}}</view>
				<view>{{data.tags || ''}}</view>
				<view>{{data.update_time || ''}}</view>
			</view>
		</view>
		<view class="article-content">
			<!-- <rich-text :nodes="htmlString"></rich-text> -->
			<!-- #ifdef APP-PLUS -->
				<uParse :content="data.content" @preview="preview" @navigate="navigate" />
			<!-- #endif -->
			<!-- #ifdef H5 -->
				<uParse :content="data.zhaiyao" @preview="preview" @navigate="navigate" />
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
				<uParse :content="data.content" @preview="preview" @navigate="navigate" />
			<!-- #endif -->
		</view>
		<view class="attachments">
			<view class="attachment">附件</view>
			<view class="oper" v-if="data.files">
				<uni-icons @click="download" type="download" size="24"></uni-icons>
				<uni-icons @click="sendMail" type="email" size="30"></uni-icons>
			</view>
		</view>
		<!-- #ifdef H5 -->
			<view class="tipgoapp" @click="openapp">去app阅读全文</view>
		<!-- #endif -->
		
		<!-- #ifndef H5 -->
			<!-- <view class="files" v-if="data.files">
				<text v-for="(item,index) in data.files" :key="index"  @click="click(item)" >{{fujiantxt}}{{index+1}}</text>
			</view> -->
		<!-- #endif -->
		
		<view class="pinglun" style="display: none;">
			<view class="card_title">评论（{{data.comments.length}}条）</view>
			<view class="uni-padding-wrap">
				<!-- 评论区 start -->
				<view class="uni-comment">
					<view class="uni-comment-list" v-for="(item,index) in data.comments" :key='index'>
						<view class="uni-comment-face"><image :src="baseURL+item.avatar" mode="widthFix"></image></view>
						<view class="uni-comment-body">
							<view class="uni-comment-top">
								<text>{{item.NAME}}</text>
								<!-- <view class="zan">
									<image src="../../static/icon_good_nor.png" mode=""></image>
									125
								</view> -->
							</view>
							<view class="uni-comment-content">{{item.comment}}</view>
							<view class="uni-comment-date">	
								<view>{{item.time.substr(0,10)}}</view>
								<!-- <view class="uni-comment-replay-btn">5回复</view> -->
							</view>
						</view>
					</view>
				</view>
				<!-- 评论区 end -->
			</view>
		</view>
		<!-- #ifndef H5 -->
		<view class="input_bottom" style="display: none;">
			<view class="more"><image src="../../static/icon_share.png" @click="togglePopup('bottom', 'share')" mode=""></image></view>
			<view class="input_bottom_box">
				<input type="text" v-model="comment" placeholder="写评论..." @confirm="confirmbut"/>
				<image class="expression" src="../../static/icon_smile.png" mode=""></image>
			</view>
			<view class="more"><button type="primary" @click="confirmbut">发送</button></view>
		</view>
		<!-- #endif -->
		
		<!-- 邮箱弹窗 -->
		<uni-popup ref="email" class="email-box">
			<view><input type="text" v-model="email" placeholder="请输入邮箱"></view>
			<view class="btns">
				<view class="btn" @click="closeEmail">取消</view>
				<view class="btn" @click="confirmEmail">确定</view>
			</view>
		</uni-popup>
		
		<!-- 底部分享弹窗 -->
		<uni-popup ref="share" :type="type" :custom="true" @change="change">
			<view class="uni-share">
				<view class="uni-share-title">分享到</view>
				<view class="uni-share-content">
					<view v-for="(item, index) in bottomData" :key="index" class="uni-share-content-box" @click="shareAction(item)">
						<view class="uni-share-content-image">
							<image :src="item.icon" class="image" />
						</view>
						<view class="uni-share-content-text">{{ item.text }}</view>
					</view>
				</view>
				<view class="uni-share-btn" @click="cancel('share')">取消分享</view>
			</view>
		</uni-popup>
		
	</view>
</template>
<script>
	import API from '../../common/api.js';
	import uParse from '../../components/uParse/src/wxParse.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	export default {
		components: {
			uParse,
			uniPopup,
			uniIcons
		},
		data() {
			return {
				data: {
					title: '',
					read: 0,
					tags: '',
					update_time: '',
					zhaiyao: '',
					content: '',
					files: ''
				},
				email: '',
				title: 'list-triplex-row',
				banner: {},
				htmlString: "",
				zaiyao:"",
				userid:uni.getStorageSync('userid'),
				comment:'',
				n_id:'',
				data:'',
				baseURL:API.baseURL,
				fujiantxt:'下载附件',
				eventid:'',
				bottomData: []
			}
		},
		onShareAppMessage() {
			return {
				title: this.banner.title,
				path: '/pages/template/list2detail-detail/list2detail-detail?detailDate=' + JSON.stringify(this.banner)
			}
		},
		onLoad(event) {
			// #ifdef APP-PLUS
			/* 隐藏凸起图标 */
			var icon = plus.nativeObj.View.getViewById("icon");
			setTimeout(function() {
				if(icon){icon.hide();}
			}, 100);
			// #endif
			this.eventid = event.data;
			this.getDetail(event.data);
			this.n_id = event.data;
			if (uni.getSystemInfoSync().platform == "ios") {
				this.fujiantxt= "复制附件链接"
			}
			
			this.getshareprovider();
		},
		methods: {
			
			//邮件发送文件
			// toolCartList: baseURL +'/ttsc/api/sendEmailFile?email=???&&file=?',
			// 文件下载地址
			// toolCartList: baseURL +'/ttsc/api/getFileUrl?file=?',
			
			
			callApp() {
			  const config = {
			    /*scheme:必须、这里我用的微信的要换成自己的scheme*/
			    scheme_IOS: "huatong://detailid="+this.eventid,
			    scheme_Adr: "huatong://detailid="+this.eventid,
			    download_IOSurl: "https://shouji.baidu.com/software/26174555.html",
			    download_ANDurl: "https://apps.apple.com/cn/app/id414478124?ls=1",
			  };
			  const u = navigator.userAgent
			  if (/MicroMessenger/gi.test(u)) {
			    // 如果是微信客户端打开，引导用户在浏览器中打开
			    alert('请在浏览器中打开')
			  }
			  if (u.indexOf('Android') - 1 || u.indexOf('Linux') - 1) {
			    // Android
			    if (this.openApp(config.scheme_Adr)) {
			      this.openApp(config.scheme_Adr) // 通过Scheme协议打开指定APP
			    } else {
			      //跳转Android下载地址
			      window.location = config.download_ANDurl;
			    }
			  } else if (u.indexOf('iPhone') - 1) {
			    if (this.openApp(config.scheme_Adr)) {
			      this.openApp(config.scheme_Adr) // 通过Scheme协议打开指定APP
			    } else {
			      // 跳转IOS下载地址
			      window.location = config.download_IOSurl;
			    }
			  }
			},
			openApp(src) {
			  // 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为
			  // 否则打开a标签的href链接
			  let ifr = document.createElement('iframe')
			  ifr.src = src
			  ifr.style.display = 'none'
			  document.body.appendChild(ifr)
			  window.setTimeout(function () {
			    // 打开App后移出这个iframe
			    document.body.removeChild(ifr)
			  }, 2000)
			},
			openapp(){
				// #ifdef H5
					this.callApp()
				// #endif
			},
			getshareprovider(){
				var _this = this
				uni.getProvider({
				    service: 'share',
				    success: function (res) {
						if (~res.provider.indexOf('weixin')) {
							_this.bottomData.push(
								{
									text: '微信',
									icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-2.png',
									name: 'weixin'
								}
							)
						}
				    }
				});
			},
			shareAction(item){
				uni.share({
				    provider: item.name,
				    scene: "WXSceneSession",
				    type: 0,
				    href: "wx.itshop.top/#/pages/news/list2detail-detail?data="+this.eventid,
				    title: this.data.title,
				    summary:this.data.zhaiyao,
				    imageUrl: this.baseURL+this.data.pic_utl,
				    success: function (res) {
				        
				    },
				    fail: function (err) {
				        
				    }
				});
			},
			togglePopup(type, open) {
				switch (type) {
					case 'top':
						this.content = '顶部弹出 popup'
						break
			
					case 'bottom':
						this.content = '底部弹出 popup'
						break
					case 'center':
						this.content = '居中弹出 popup'
						break
				}
				this.type = type
				if (open === 'tip') {
					this.show = true
				} else {
					this.$refs[open].open()
				}
			},
			cancel(type) {
				if (type === 'tip') {
					this.show = false
					return
				}
				this.$refs[type].close()
			},
			change(e) {
				console.log(e.show)
			},
			files(urlB){//下载附件
				var url = this.baseURL + urlB;
				if (uni.getSystemInfoSync().platform == "android") {
					uni.showLoading({
					    title: '下载中'
					});
					uni.downloadFile({
					    url: url, 
					    success: (res) => {
					        if (res.statusCode === 200) {
								 uni.saveFile({
								      tempFilePath:res.tempFilePath,
								      success: function (res) {
								        var savedFilePath = res.savedFilePath;
										uni.showModal({
										    title: '文件目录',
										    content: savedFilePath,
											showCancel:false,
										    success: function (res) {
										        
										    }
										});
								      }
								    });
					        }
							 uni.hideLoading();
					    },
						fail:(res) => {
							uni.showToast({
								title: '下载失败',
								icon:'none',
								mask: false,
								duration: 1500
							});
							 uni.hideLoading();
						}
					});
				}else{
					uni.setClipboardData({
					    data: url,
					    success: function () {
					        uni.showToast({
					        	title:"复制成功",
					        	icon:'none',
								duration:2000
					        })
					    }
					});
				}
				
				
			},
			preview(src, e) {
				// do something
				// console.log("src: " + src);
			},
			navigate(href, e) {
				// 如允许点击超链接跳转，则应该打开一个新页面，并传入href，由新页面内嵌webview组件负责显示该链接内容
				// console.log("href: " + href);
				uni.showModal({
					content : "点击链接为：" + href,
					showCancel:false
				})
			},
			confirmbut(event){
				var _this = this;
				if(this.comment){
					uni.request({
						url:API.doComment,
						data:{n_id:this.n_id,u_id:this.userid,comment:this.comment},
						method:"GET",	
						success: (data) => {
							if(data.data.success){
								_this.comment = '';
								_this.getDetail(_this.eventid);
							}
							uni.showToast({
								title: data.data.message,
								icon:'none',
								mask: false,
								duration: 1500
							});
						},
						fail: () => {
							uni.showToast({
								title: "评论失败",
								icon:'none',
								mask: false,
								duration: 1500
							});
						}
					})
				}
			},
			getDetail(id) {
				let _this = this;
				
				// #ifdef H5
					this.userid =	'10001'
				// #endif
				uni.showLoading({title: '加载中'});
				uni.request({
					url: this.$API.tooDetail,
					data:{toolid:id},
					method:"GET",
					success: (res) => {
						uni.hideLoading();
						
						// 数据处理
						res.data.data.update_time = res.data.data.update_time ? res.data.data.update_time.split(' ')[0] : '';
						_this.data = res.data.data;
						console.log(_this.data);
					},
					fail: () => {
						uni.hideLoading();
					}
				})
			},
			// 下载附件
			download(){
				let _this = this;
				uni.showLoading({title: '下载中'});
				uni.request({
					url: _this.$API.toolCartDownload,
					data: {file: _this.data.files},
					header: _this.$API.get_head(),
					success: (res)=>{
						uni.hideLoading();
						uni.setClipboardData({
						    data: res.data.data.url,
						    success: function () {
						        uni.showToast({
						        	title:"复制成功",
						        	icon:'none',
									duration:2000
						        })
						    }
						});
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title:"加载失败",
							icon:'none'
						});
					}
				});
			},
			// 发送附件
			sendMail(){
				this.$refs.email.open();
			},
			// 取消发送邮箱
			closeEmail(){
				this.$refs.email.close();
			},
			// 确定发送邮箱
			confirmEmail(){
				// 校验邮箱格式
				let _this = this;
				let reg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
				if(!reg.test(_this.email)){
					return uni.showToast({
						icon: 'none',
						title: '邮箱格式错误'
					});
				}
				
				// 异步请求
				uni.showLoading({title: '发送中'});
				uni.request({
					url: _this.$API.toolCartMail,
					method: 'POST',
					data: {
						email: _this.email,
						file: _this.data.files
					},
					header: _this.$API.get_head(),
					success: (res)=>{
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: '已发送到您的邮箱，注意查收'
						});
						setTimeout(()=>{
							_this.$refs.email.close();
						}, 1500);
					},
					fail: ()=>{
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: '发送失败'
						});
					}
				});
			},
			doZan(id){
				uni.request({
					url:API.doZan,
					data:{n_id:id,u_id:this.userid},
					method:"GET",
					success: (data) => {
						uni.showToast({
							title: data.data.message,
							icon:'none',
							mask: false,
							duration: 1500
						});
					},
					fail: () => {
						uni.showToast({
							title: "点赞失败",
							icon:'none',
							mask: false,
							duration: 1500
						});
					}
				})
			},
			doStore(id){
				uni.request({
					url:API.doStore,
					data:{n_id:id,u_id:this.userid},
					method:"GET",
					success: (data) => {
						uni.showToast({
							title: data.data.message,
							icon:'none',
							mask: false,
							duration: 1500
						});
					},
					fail: () => {
						uni.showToast({
							title: "收藏失败",
							icon:'none',
							mask: false,
							duration: 1500
						});
					}
				})
			},
			doComment(){
				
			}
		}
	}
</script>

<style>
	@import url("../../components/uParse/src/wxParse.css");
	page{
		background:#FFFFFF;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}
	.email-box .btns{
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-top: 2upx solid #ddd;
		margin-top: 20upx;
	}
	.email-box .btns .btn{
		padding-top: 20upx;
	}
	.email-box .btns .btn:last-child{
		color: #0000FF;
	}
	.attachments{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20upx 0 20upx 30upx;
	}
	.attachment{
		color: blue;
	}
	.oper{
		display: flex;
		align-items: center;
	}
	.oper uni-icons{
		margin-right: 20upx;
	}
	.banner {
		height: 360upx;
		overflow: hidden;
		position: relative;
		background-color: #ccc;
	}

	.banner-img {
		width: 100%;
	}

	.banner-title {
		max-height: 84upx;
		overflow: hidden;
		position: absolute;
		left: 30upx;
		bottom: 30upx;
		width: 90%;
		font-size: 32upx;
		font-weight: 400;
		line-height: 42upx;
		color: white;
		z-index: 11;
	}

	.article-meta {
		padding: 20upx 40upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		color: gray;
	}

	.article-text {
		font-size: 26upx;
		line-height: 50upx;
		margin: 0 20upx;
	}

	.article-author,
	.article-time {
		font-size: 30upx;
	}

	.article-content {
		padding: 0 30upx;
		overflow: hidden;
		font-size: 30upx;
		/* margin-bottom: 30upx; */
		border-bottom:20upx solid #f7f7f7;
		-webkit-user-select: none;
		-moz-user-select: none;
		-o-user-select: none;
		user-select: none;
	}
	.uni-padding-wrap{
		width:100%;
		padding: 0;
	}
	.uni-comment-list{
		/* position:relative; */
		padding: 30upx;
		padding-bottom:36upx;
		border-bottom:1upx solid #e5e5e5;
		width: auto !important;
	}
	.uni-comment-body{
		width:585upx;
		/* position:absolute; */
		top: 0;
		right:0;
	}
	.uni-comment-top{
		color: #6b6b6b;
		font-size:26upx;
	}
	.uni-comment-top>.zan{color:#6b6b6b;font-size:26upx;float:right;width:100upx;}
	.uni-comment-top image{
		width:30upx;
		height:30upx;
		/* vertical-align:bottom; */
		margin-right:10upx;
	}
	.uni-comment-content{
		color: #222222;
		font-size:30upx;
	}
	.uni-comment-date{
		color: #222222;
		font-size:22upx;
	}
	.uni-comment-face{
		width:80upx;
		height:80upx;
		margin-right:35upx;
	}
	.card_title{
		font-size:32upx;
		color:#222222;
		padding:35upx 26upx;
		border-bottom:1upx solid #e5e5e5;
	}
	.del_title{
		padding:0 24upx;
		margin-bottom:24upx;
		border-bottom:1upx solid #e5e5e5;
	}
	.del_title_title{
		font-size: 38upx;
		font-weight: bold;
		color:#222222;
		padding:40upx 0;
		line-height:1.5;
	}
	.del_title_tab{
		padding-bottom:26upx;
		color: #999999;
		font-size:24upx;
		overflow: hidden;
	}
	.del_title_tab>view{float: left;width:33.33333%;text-align:center;}
	.del_title_tab>view:last-child{text-align:right;}
	.del_title_tab>view:first-child{text-align:left;}
	
	
	.input_bottom{
		height:68upx;	
		background:#FFFFFF;
		position:fixed;
		bottom:0;
		left:0;
		/* width:100%; */
		display:flex;
		padding: 15rpx 20rpx;
		box-shadow: #CCCCCC 20rpx 20rpx 20rpx 20rpx;
		width: 710rpx;
		overflow: hidden;
	}
	.input_bottom input{
		width:435upx;
		height:68upx;
		border:1upx solid #e8e8e8;
		border-radius:34upx;
		background:#f4f4f5;
		padding-left:20upx;
		padding-right:90upx;
	}
	.input_bottom>.more>image{
		width:54upx;
		height:54upx;
		margin-right: 10rpx;
		margin-top:10upx;
	}
	.input_bottom>.more>button{
		width: 90rpx;
		height: 54rpx;
		margin-left: 10rpx;
		margin-top: 10rpx;
		font-size: 24rpx;
		padding: 0;
		line-height: 2.2;
		color: #fff;
	}
	.input_bottom_box{
		position:relative;
	}
	.input_bottom_box .expression{
		position:absolute;
		width:40upx;
		height:40upx;
		right:40upx;
		top:16upx;
	}
	.pinglun{margin-bottom:68upx;}
	
	/*去app查看全文*/
	.tipgoapp{
		text-align: center;
		box-shadow:0px -10upx 40upx 0px #ccc; 
		padding:20upx 0;
		color: #007AFF;
	}
	/*下载附件*/
	.files{
		text-align: center;
		padding: 10rpx;
		border-bottom: 20rpx solid #f7f7f7;
		color: blue;
	}
	.files text{
		margin-right: 10upx;
	}
	
	/* 底部分享 */
	.uni-share {
		background: #fff;
		width: 100%;
		position: fixed;
		bottom:0;
	}
	
	.uni-share-title {
		line-height: 60upx;
		font-size: 24upx;
		padding: 15upx 0;
		text-align: center;
	}
	
	.uni-share-content {
		display: flex;
		flex-wrap: wrap;
		padding: 15px;
	}
	
	.uni-share-content-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		box-sizing: border-box;
	}
	
	.uni-share-content-image {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60upx;
		height: 60upx;
		overflow: hidden;
		border-radius: 10upx;
	}
	
	.uni-share-content-image .image {
		width: 100%;
		height: 100%;
	}
	
	.uni-share-content-text {
		font-size: 26upx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}
	
	.uni-share-btn {
		height: 90upx;
		line-height: 90upx;
		border-top: 1px #f5f5f5 solid;
		text-align: center;
		color: #666;
	}
</style>
